<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      border: 1px red solid;
      float: left;
      width: 200px;
      height: 200px;

    }
  </style>
</head>


<body>
  <div style="overflow: visible;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis quam, sint
    molestias, eligendi necessitatibus dolorum a eveniet, odio blanditiis provident sapiente nostrum fuga! Consequuntur
    qui numquam, magni quidem amet suscipit!</div>
  <div style="overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci minima tempora id
    rerum sunt, sit non repellendus at odio dicta assumenda laudantium dolore quos necessitatibus? Odit facere hic
    cupiditate!</div>
  <div style="overflow: hidden;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui explicabo reiciendis
    excepturi quae, iure sit mollitia? Voluptas, placeat blanditiis enim libero, unde dignissimos quae laborum
    recusandae error quis facilis. Consequatur?</div>
  <div style="overflow: scroll;">即使不需要也会出现滚动条</div>
  <h1 style="clear:left">overflow: visible溢出部分和其他元素重叠，不占用位置</h1>
</body>

</html>